<template>
    <div class="myproject clearfix">
        <div class="title">我的项目</div>
        <ul class="prolist">
            <li class="project" v-for="item in result">
                <h3>{{item.name}}</h3>
                <p>{{item.summary}}</p>
                <div class="projectWrap" @click="incontent(item.id, item.name, item.createEmpId, item)"></div>
                <div class="project-revision" v-if="role == 'ADMIN' || createId == item.createEmpId">
                    <i class="el-icon-edit" @click="editProject(item)" ></i>
                    <i class="el-icon-delete" @click="chooseProject(item)"></i>
                </div>
            </li>
            <li class="project" @click="addProject()">
                <img src="../../assets/home/addnew.png">
            </li>
        </ul>
        <div class="delete-wrap">
            <el-dialog
                title="提示"
                :visible.sync="ProVisible"
                size="tiny">
                <span>删除此项目，将同时删除本项目下的所有任务。确认删除?</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="ProVisible = false">取 消</el-button>
                <el-button type="primary" @click = "deleteProject()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="tc-bd"
             v-show="tcshow"
             @click.stop="tcer = false">
            <div class="tc">
                <div class="tc-title">
                    <span>创建项目</span>
                    <span class="el-icon-close tc-title-close"
                          @click="tcshow = false"></span>
                </div>
                <div class="tc-content">
                    <el-form ref="form"
                             :model="form"
                             label-width="80px">
                        <el-form-item label="项目名称">
                            <el-input v-model="form.name1"></el-input>
                        </el-form-item>
                        <el-form-item label="项目简介">
                            <el-input v-model="form.name2"></el-input>
                        </el-form-item>
                        <el-form-item label="项目周期">
                            <el-col :span="11">
                                <el-date-picker v-model="form.value1"
                                                type="date"
                                                placeholder="选择日期时间"
                                                class="w-all"
                                                ></el-date-picker>
                            </el-col>
                            <el-col class="line"
                                    :span="2">---</el-col>
                            <el-col :span="11">
                                <el-date-picker v-model="form.value2"
                                                type="date"
                                                placeholder="选择日期时间"
                                                class="w-all"
                                                :picker-options="pickerOptions"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="项目人员"
                                      class="w-all tc-er">
                            <div class="tc-ry"
                                 @click.stop="tcer = true">
                                <ul>
                                    <li v-for="item in currentcs">
                                        <span v-if="item.type === false"></span>
                                        <span v-else="item.type === true"
                                              class="tc-name">{{item.label}}</span>
                                    </li>
                                </ul>
                            </div>
                            <div v-show="tcer"
                                 class="tc-person">
                                <span @click.stop="tcer = true">
                                       <el-input placeholder="输入关键字进行过滤" v-model="filterText" >
                                       </el-input>
                                     </span>
                                <el-tree :data="persons"
                                         show-checkbox=""
                                         :filter-node-method="filterNode"
                                         node-key="id"
                                         ref="tree2"
                                         highlight-current
                                         :props="defaultProps"
                                         @check-change="getCheckedNodes(persons)">
                                </el-tree>
                            </div>
                        </el-form-item>
                        <el-form-item label="项目类型" v-show="!isChoose">
                            <el-select v-model="templateId"
                                       placeholder="请选择"
                                       class="w-all">
                                <el-option v-for="item in options"
                                           :label="item.name"
                                           :value="item.id"
                                          >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div class="tc-btn">
                            <el-button type="primary"
                                       @click="add" v-if="!isChoose">立即创建</el-button>
                            <el-button type="primary"
                                       @click="modify" v-if="isChoose">立即修改</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // pickerOptions: {
            //     disabledDate(time) {
            //         return time.getTime() < this.form.value1;
            //     }
            // },
            pickerOptions: {
                disabledDate: (time) => {
                    return time.getTime() - 8.64e7 < this.form.value1;
                }
            },
            ProVisible: false,
            isChoose: false,
            tcshow: false,
            tcer: false,
            currentcs: [],
            result: [],
            options: [],
            templateId: '',
            form: {
                name1: '',
                name2: '',
                region: '',
                value1: '',
                value2: ''
            },
            filterText: '',
            persons: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            createId:localStorage.getItem("ID"),
            role: localStorage.getItem("ROLE")
        };
    },
    watch: {
        filterText(val) {
            this.$refs.tree2.filter(val);
        }
    },
    methods: {
        // clearEndTime() {
        //     this.form.value2 = '';
        // },
        formatDateTime: function (date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            return y + '-' + m + '-' + d;
        },
        add: function () {
            this.$http.post(
                this.h + '/projects/',
                {
                    name: this.form.name1,
                    summary: this.form.name2,
                    endTime: this.formatDateTime(this.form.value2),
                    startTime: this.formatDateTime(this.form.value1),
                    tempTypeId: this.templateId,
                    empId: this.$refs.tree2.getCheckedKeys(true)
                },
                {
                    headers: {
                        'Xwt-Request-Token': localStorage.getItem('TOKEN')
                    }
                }).then((res) => {
                    if (res.data.code == '500') {
                        this.$alert(res.data.msg, '提示', {
                            type: 'error'
                        })
                    } else {
                        console.log(res)
                        localStorage.setItem('projectName', res.data.data.name);
                        localStorage.setItem('projectId', res.data.data.id);
                        this.$router.push({
                            path: '/content',
                            query: {
                                'id': res.data.data.id,
                                'name': res.data.data.name
                            }
                        })
                    }
                }).catch((err) => {
                    console.log(err);
                })
            this.tcshow = false;
        },
        modify: function() {
            this.$http.patch(
                this.h + '/projects/'+ localStorage.getItem('projectId'),{
                        name: this.form.name1,
                        summary: this.form.name2,
                        endTime: this.form.value2,
                        startTime: this.form.value1,
                    },
                    {
                        headers: {
                        'Xwt-Request-Token': localStorage.getItem('TOKEN')
                    }
                }).then((res) => {
                    this.tcshow = false;
                    this.$http.get(
                        this.h + '/employees/' + localStorage.getItem('ID') + '/projects',
                        {
                            headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                        }).then((res) => {
                            console.log(res);
                            this.result = res.data.data;
                        }).catch((err) => {
                            console.log('报错了！');
                        });
                        console.log(res);
                        console.log(localStorage.getItem('projectId'))

                })
        },
        filterNode: function (value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        getCheckedNodes: function (data) {
            this.currentcs = this.$refs.tree2.getCheckedNodes();
        },
        incontent: function (key, name, createId, item) {
            localStorage.setItem('secIsChoose', 1);
            // 如果带过来的参数不为空则重新赋值，如果参数为空则不赋值
            if (key) {
                localStorage.setItem('projectId', key);
            }
            if (name) {
                localStorage.setItem('projectName', name);
            }
            if (createId) {
                localStorage.setItem('createEmpId', createId);
            }
            this.$router.push({
                path: '/content',
                query: {
                    'id': key
                }
            })
        },
        addProject: function() {
            this.tcshow = true;
            this.isChoose = false;
            this.form.name1 = "";
            this.form.name2 = "";
            this.form.value1 = "";
            this.form.value2 = "";
            this.templateId = "";
        },
        editProject: function(item) {
            console.log('edit porject');
            console.log(item)
            this.tcshow = true;
            this.form.name1 = item.name;
            this.form.name2 = item.summary;
            this.form.value1 = item.startTime;
            this.form.value2 = item.endTime;
            // this.templateId = item.
            this.isChoose = true;
            localStorage.setItem('projectId', item.id);
        },
        chooseProject: function(item) {
            this.ProVisible = true;
            localStorage.setItem('projectId',item.id);
        },
        deleteProject: function() {
            this.ProVisible = false;
            this.$http.delete(
                this.h + '/projects/'+ localStorage.getItem('projectId'),
                {
                    headers:{ 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                }).then((res) => {
                    console.log(res);
                    this.$http.get(
                        this.h + '/employees/' + localStorage.getItem('ID') + '/projects',
                        {
                            headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                        }).then((res) => {
                            console.log(res);
                            this.result = res.data.data;
                        }).catch((err) => {
                            console.log('报错了！');
                        });
                }).catch((err) => {
                    console.log('删除错误！')
                })
            
        }
    },
    created() {
        this.$http.get(
            this.h + '/employees/' + localStorage.getItem('ID') + '/projects',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }).then((res) => {
                console.log(res);
                this.result = res.data.data;
            }).catch((err) => {
                console.log('报错了！');
            });
        this.$http.get(
            this.h + '/templates',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }).then((res) => {
                console.log(res);
                this.options = res.data.data;
            }).catch((err) => {
                console.log('报错啦');
            });
        this.$http.get(
            this.h + '/treeNode/deptEmp',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') },
            }).then((res) => {
                this.persons = res.data.data;
            }).catch((err) => {
                console.log('报错啦');
            });
    }
};
</script>

<style lang="scss">
    .myproject {
        width: 100%;
        .title {
            font-size: 16px;
            font-weight: bold;
            line-height: 32px;
            width: 100%;
        }
    }


.prolist {
    width: 100%;
    float: left;
    padding: 20px 0 0;
    margin-top: 6px;
    border-bottom: 1px solid #e7eaf4;
    border-top: 1px solid #e7eaf4;
    .project {
        float: left;
        width: 23.5%;
        height: 128px;
        padding: 25px 35px;
        margin-right: 2%;
        margin-bottom: 20px;
        border-radius: 5px;
        background: #f6f9fb;
        cursor: pointer;
        position: relative;
        .creat-project {
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
        }
        h3 {
            width: 100%;
            font-size: 20px;
            font-weight: bold;
            line-height: 26px;
            color: #333;
            padding-bottom: 10px;
        }
        p {
            font-size: 16px;
            color: #7b7b8e;
        }
        .projectWrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }
        .project-revision {
            display: none;
            position: absolute;
            top: 10px;
            right: 9px;
            font-size: 12px;
            z-index: 20;
        }
    }
    .project:hover {
        background: #bfc1c9;
        transition: .2s;
    }
    .project:hover .project-revision{
        display: block;
    }
    .project:nth-child(4n) {
        margin-right: 0%;
    }
    .project:last-of-type {
        text-align: center;
        color: #999;
        span {
            display: inline-block;
            width: 100%;
        }
    }
}

.tc-bd {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, .5);
    z-index: 99;
    top: 0;
    left: 0;
}

.tc {
    width: 600px;
    height: 420px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -210px;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
    border: 1px solid #eeeeee;
    color: #666;
    border-radius: 3px;
}

.tc-title {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
    position: relative;
    background: #f7f8fc;
}

.tc-title-close {
    position: absolute;
    top: 10px;
    right: 10px;
    line-height: 28px;
}

.tc-content {
    width: 100%;
    padding: 20px 5% 0;
    .el-form-item__content {
        line-height: 0;
        .line.el-col.el-col-2 {
            line-height: 36px;
        }
    }
}

.tc-btn {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 0;
    z-index: 0;
    button {
        width: 418px;
        background: #00c583;
        border-color: #00c583;
    }
    button:hover {
        background: rgba(0, 197, 131, .9);
        border-color: rgba(0, 197, 131, .9);
    }
}

.tc-person {
    width: 100%;
    position: absolute;
}

.line {
    text-align: center;
}

.w-all {
    width: 100% !important;
}

.tc-er {
    position: relative;
    z-index: 9;
}

.tc-ry {
    width: 100%;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    display: block;
    font-size: inherit;
    height: 36px;
    line-height: 1;
}

.tc-ry ul {
    width: 100%;
    flaot: left;
}

.tc-ry ul li {
    float: left;
}

.tc-name {
    padding: 5px 10px;
    margin: 5px 5px;
    float: left;
    background: #20a0ff;
    color: #ffffff;
    border-radius: 5px;
}
</style>
